<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Product List</title>
    <style>
      /* 通用样式 */
      body {
        font-family: Arial, sans-serif;
        background-color: #f2f2f2;
        margin: 0;
        padding: 0;
      }
      
      .container {
        max-width: 1200px;
        margin: auto;
        padding: 20px;
      }
      
      h1 {
        text-align: center;
        margin-top: 50px;
      }
      
      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 50px;
      }
      
      th, td {
        text-align: left;
        padding: 10px;
      }
      
      th {
        background-color: #4CAF50;
        color: white;
      }
      
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
      
      tr:hover {
        background-color: #e6e6e6;
      }
      
      /* 特定样式 */
      .product-image {
        width: 100px;
        height: 100px;
      }
      
      .status-draft {
        color: gray;
      }
      
      .status-published {
        color: green;
        font-weight: bold;
      }
      
      .status-archived {
        color: red;
        font-weight: bold;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <h1>Product 详情</h1>
      <a href="{:url('admin/banners/create')}">新增</a>
      <table>
        <thead>
          <tr>
            <th>id</th>
            <th>Name</th>
            <th>Slug</th>
            <th>Image</th>
            <th>Order</th>
            <th>Status</th>
            <th>Created At</th>
            <th>Created UID</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
      
            <tr>
                <td>{$banners.id}</td>
                <td>{$banners.name}</td>
                <td>{$banners.slug}</td>
                <td><img class="product-image" src="{$banners.image}"></td>
                <td>{$banners.order}</td>
                <td class="status-draft">{$banners.status}</td>
                <td>{$banners.created_at}</td>
                <td>{$banners.created_uid}</td>
                <td><a href="{:url('admin/banners/create',['id' => $banners.id])}">修改</a></td>
            </tr>
           
          <!-- <tr>
            <td>Product B</td>
            <td>product-b</td>
            <td><img class="product-image" src="https://via.placeholder.com/100x100.png?text=Product+B"></td>
            <td>2</td>
            <td class="status-published">Published</td>
            <td>2021-01-02 00:00:00</td>
            <td>UID234567</td>
          </tr>
          <tr>
            <td>Product C</td>
            <td>product-c</td>
            <td><img class="product-image" src="https://via.placeholder.com/100x100.png?text=Product+C"></td>
            <td>3</td>
            <td class="status-archived">Archived</td>
            <td>2021-01-03 00:00:00</td>
            <td>UID345678</td>
          </tr> -->
        </tbody>
      </table>
    </div>
  </body>
</html>

